<template lang="html">
  <el-drawer
    :title="`字典配置：${currentRowObj && currentRowObj.keyName}`"
    direction="rtl"
    size="550px"
    :wrapperClosable="false"
    :visible="dialogVisible"
    class="dict-config-draw"
    @close="close"
  >
    <div v-loading="wrapperLoading" class="draw-wrapper draw-loading-wrapper">
      <el-form ref="ruleForm" :model="{ tableData }">
        <el-table :data="tableData" border style="width: 100%" stripe>
          <el-table-column prop="label" label="名称" width="140" align="center">
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.label`" required>
                <el-input v-model="row.label" />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="value" label="数值" width="140" align="center">
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.value`" required>
                <el-input v-model="row.value" />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="sortBy" label="排序" width="140" align="center">
            <template slot-scope="{ row }">
              <el-input-number v-model="row.sortBy" :min="1" controls-position="right" :max="100" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="70" align="center">
            <template slot="header">
              <el-button type="text" @click="doAdd">增加</el-button>
            </template>

            <template slot-scope="{ $index }">
              <el-button type="text" class="danger" @click="doDel($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div class="mt10" flex="dir:right">
        <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
        <el-button class="mr10" @click="close">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import dialogMixin from "mixins/dialogMixin";
import { cloneDeep } from "lodash";
import { DictDetailAdd, DictDetail } from "api/sys/dict";

export default {
  mixins: [dialogMixin],
  props: {
    currentRowObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // table数据
      tableData: [],
    };
  },

  methods: {
    /**
     * 初始化
     */
    initForm() {
      this._DictDetail();
    },
    /**
     * 接口提交
     */
    async _DictDetailAdd() {
      try {
        this.btnLoading = true;
        await DictDetailAdd({
          dictId: this.currentRowObj.id,
          dictList: this.tableData,
        });
        this.$message.success("字典配置成功");
        this.$emit("success");
        this.close();
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },
    /**
     * 提交
     */
    submitData() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this._DictDetailAdd();
        } else {
          this.$message.error("有字段没有填写完整，请检查");
          return false;
        }
      });
    },
    /**
     * 详情
     */
    async _DictDetail() {
      try {
        this.wrapperLoading = true;
        const { id } = this.currentRowObj;
        const data = await DictDetail(id);
        if (data) {
          this.tableData = data.sort((a, b) => a.sortBy - b.sortBy);
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.wrapperLoading = false;
      }
    },
    /**
     * 删除
     */
    async doDel(index) {
      await this.$myConfirm("删除本条数据");
      this.tableData.splice(index, 1);
    },
    /**
     * 新增
     */
    doAdd() {
      this.tableData.push({
        label: "",
        value: "",
        sortBy: this.getMaxDictSort() + 1,
      });
    },
    /**
     * 获取当前最大的sort字段值
     */
    getMaxDictSort() {
      let maxDictSort = 0;
      const { length } = this.tableData;
      if (length) {
        const sortedTableData = cloneDeep(this.tableData).sort((a, b) => a.sortBy - b.sortBy);
        maxDictSort = sortedTableData[length - 1].sortBy;
      }
      return maxDictSort;
    },
  },
};
</script>

<style lang="scss">
.dict-config-draw {
  .el-input-number {
    width: 118px;
  }
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
